<template>
  <div class="about">
    <button @click="change">1325</button>
    <el-switch v-model="status" />
    <MyTable>
      <template #name="{ item }">
        <div>{{ item.id }}</div>
      </template>
    </MyTable>
    <MyPagination
      ref="pagination"
      :pageSize="pageData.pageSize"
      :currentPage2="pageData.currentPage2"
      :page="page"
      :total="pageData.total"
      @pageChange="pageChange"
    ></MyPagination>
  </div>
</template>

<script setup lang="ts">
import { ref, onActivated } from 'vue'
import { pageType, PaginationDataType } from '@/interfaces/PaginationType'
const status = ref(false)

onActivated(() => {
  console.log(2225222)
})
const op = ref('7')
// const menu = [
//   {
//     title: "分类",
//     url: "",
//   },
//   {
//     title: "我的",
//     url: "",
//     children: [
//       {
//         title: "个人中心",
//         url: "b1111",
//       },
//       {
//         title: "我的订单",
//         url: "b2222",
//       },
//       {
//         title: "购物车",
//         url: "b3333",
//       },
//       {
//         title: "零钱",
//         url: "b4444",
//       },
//       {
//         title: "账户安全",
//         url: "b5555",
//       },
//     ],
//   },
//   {
//     title: "首页",
//     url: "https://segmentfault.com/",
//   },
// ];
const change = () => {
  op.value =
    '77777777777777777777777777777777777777777777777777777777777777777777777777777777777777'
}
// 分页组件配置
const page: pageType = {
  disabled: false,
  background: true,
  small: false,
  layout: 'total, sizes, prev, pager, next,jumper',
}
const pageData: PaginationDataType = {
  pageSize: 20,
  currentPage2: 1,
  total: 400,
}
// 页码改变
const pageChange = (page: { pageSize: number; pageNumber: number }) => {
  console.log(page)
}
// const selectChangeData = (val: string) => {
//   console.log(val, "val");
// };
</script>
<style>
.si {
  display: flex;
}
</style>
